<template>
  <div class="stuProduct">
    <!-- 搜索框 -->
    <div class="search">
      <el-select
        v-model="searchValue"
        filterable
        clearable
        remote
        @change="searchTextChange"
        @blur="searchBlur"
        reserve-keyword
        @clear="clear"
        placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
        :remote-method="remoteMethod"
        :loading="loading"
      >
        <el-option
          v-for="item in searchList"
          :key="item.sId"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <el-button icon="el-icon-search" @click="searchButton"></el-button>
      <el-button type="success" @click="showDialog" v-has="'add'"
        >添加</el-button
      >
    </div>
    <!-- 班级选择器 -->
    <template>
      <div class="select-class">
        <!-- 框框 -->
        <el-form>
          <el-form-item label="选择班级:">
            <el-select
              v-model="classes"
              filterable
              @visible-change="classVisible"
              @change="changeClass"
              placeholder="请选择"
            >
              <el-option label="全部" value="all"></el-option>
              <el-option
                v-for="(item, index) in classOptions"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <!-- 导出excel -->
    <div>
      <el-button icon="iconfont icon-excel" @click="exportExcel"
        >导出excel数据</el-button
      >
    </div>
    <!-- 表格 -->
    <template>
      <el-table :data="stuData" v-loading="loading" border style="width: 100%">
        <el-table-column fixed prop="headimgurl" label="头像" width="100">
          <template slot-scope="scope">
            <!-- {{scope.row.headimgurl}} -->
            <img :src="scope.row.headimgurl" width="80" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="class" label="班级" width="120">
        </el-table-column>
        <el-table-column prop="city" label="城市" width="120">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
        <el-table-column prop="degree" aline="cneter" label="学历" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="310">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-search"
              v-has="'read'"
              @click="showStu(row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="editStu(row)"
              v-has="'edit'"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteStu(row)"
              v-has="'delete'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页器 -->
    <div class="pagination-box">
    <el-pagination background 
    layout="prev, pager, next" 
    @current-change="changePage"
    hide-on-single-page
    :total="total"
    :page-size="dataCount">
    </el-pagination>
    </div>
    <!-- 弹出框 -->
    <stu-dialog></stu-dialog>
  </div>
</template>
<script>
import {
  getStuList,
  addStuDetail,
  delStu,
  searchStu,
  getClasses,
} from "../../../api/index";
import dialog from "../../../components/dialog";
//引入导出excel
import qee from "qf-export-excel";
export default {
  data() {
    return {
      stuData: [],
      loading: true,
      options: [],
      value: "",
      list: [],
      states: [],
      classes: "",
      searchList: [],
      searchValue:"",
      blurSearchValue: "",
      classOptions: [],
      params: {
        class: "",
        count:5,
        page:""
      },
      dataCount:5,//每页显示的数据量
      dataPage:1,//页码
      total:0,//总数据条数
    };
  },
  methods: {
    //更新表格数据
    updateStuTbale(params) {
      this.loading = true;
      params = this.params
      params.count = this.dataCount || ""
      // params.page = this.dataPage || ""
      getStuList(params)
        .then((res) => {
          // console.log(res);
          if (res.data && res.data.state) {
            this.stuData = res.data.data;
            this.total = res.data.total;
            this.loading = false;
          } else {
            this.$message.error("数据获取失败");
            this.loading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("获取数据错误或网络错误");
          this.loading = false;
        });
    },
    showDialog() {
      this.$bus.$emit("showDialog");
      // updateStuTbale();
    },
    //删除学生信息
    deleteStu(row) {
      // console.log(this.stuData)
      console.log(row);
      if (row && row.sId) {
        //提示并让用户确认是否删除
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delStu(row.sId) //调用删除函数
              .then((res) => {
                if (res.data && res.data.state) {
                  console.log(res);
                  this.updateStuTbale(); //刷新表格
                } else {
                  console.log(res);
                  this.$message.warning("删除失败");
                }
              })
              .catch((err) => {
                this.$message.error("删除出错");
              });
            this.$message.success("删除成功");
          })
          .catch(() => {
            this.$message.info("已取消删除");
          });
      }
    },
    //编辑学生信息
    editStu(row) {
      // 弹出dialog
      // 数据回显
      // 更新提交
      this.$bus.$emit("editStuEvent", row);
    },
    //更新表格数据
    clear(e) {},
    //搜索框选中值发生变化的事件
    searchTextChange(searchText) {
      //加载动画
      this.loading = true;
      console.log(searchText);
      let key = searchText;
      searchStu(key)
        .then((res) => {
          if (res.data && res.data.state) {
            // console.log(res.data.data);
            //更改表格数据对象
            this.stuData = res.data.data;
            //加载动画
            this.loading = false;
          } else {
            this.$massage.warning("搜索失败");
          }
        })
        .catch((err) => {
          this.$massage.error("搜索出错");
        });
    },
    //搜索框处理函数
    remoteMethod(query) {
      //query就是变化后的值console.log(query);
      this.blurSearchValue = query;
      let key = query;
      let count = this.dataCount;
      let page = this.dataPage;
      let parmas = {
        key,
        count,
        page
      }
      searchStu(parmas)
        .then((res) => {
          if (res.data && res.data.state) {
            // console.log(res.data.data);
            this.searchList = res.data.data;
          } else {
            this.$massage.warning("搜索失败");
          }
        })
        .catch((err) => {
          this.$massage.error("搜索出错");
        });
    },
    //失去焦点保留输入框的值
    searchBlur() {
      this.searchValue = this.blurSearchValue;
    },
    //搜索按钮被点击
    searchButton() {
      let key = this.searchValue;
      let count = this.dataCount;
      let page = this.dataPage;
      let parmas = {
        key,
        count,
        page
      }
      // console.log(parmas);
      searchStu(parmas).then((res) => {
        if (res.data && res.data.state) {
          console.log(res.data.data);
          //更改表格数据对象

          this.stuData = res.data.data;
          this.total = res.data.total;
          //加载动画
          this.loading = false;
        }
      });
    },
    //选择班级
    changeClass(query) {
      // console.log(query);
      this.params = query === "all" ? {count:this.dataCount} : { class: query,count:this.dataCount };
      this.updateStuTbale(this.params);
    },
    //班级选择框展开和收起触发的事件
    classVisible(isVisible) {
      // console.log(isVisible);
      if (!isVisible) {
        return;
      }
      getClasses().then((res) => {
        if (res.data && res.data.state) {
          console.log(res);
          this.classOptions = res.data.data;
        }
      });
    },
    //查看学生
    showStu(row) {
      console.log(row);
    },
    //导出Excel
    exportExcel() {
      let titleList = [
        {
          title: "头像地址",
          key: "headimgurl",
          },
        {
          title: "姓名",
          key: "name",
        },
        {
          title: "年龄",
          key: "age",
        },
        {
          title: "班级",
          key: "class",
        },
      ];
      // console.log(this.stuData);
      let dataSource = this.stuData;
      qee(titleList,dataSource,"学生数据")
    },
    //分液器页码发生改变
    changePage(page){
      // console.log(page);
      this.dataPage = page
      this.params.page = page
      if(this.blurSearchValue){
        this.searchButton() 
        return
      }
      this.updateStuTbale(this.params)
    }
  },
  mounted() {
    //页面加载时,获取学生信息表数据
    this.updateStuTbale(this.params);
    this.$bus.$on("updateStuTable", () => {
      this.updateStuTbale(this.params);
    });
  },
  components: {
    "stu-dialog": dialog,
  },
};
</script>


<style>
.el-select {
  width: 280px;
}
.el-select .el-input__inner {
  width: 280px;
}
.pagination-box{
  width: 100%;
}
.el-pagination {
  margin: 0 auto;
}
</style>